<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 一、父组件里面访问子组件：this.$children 或者 this.$refs（推荐使用）-->
    <!-- this.$children的缺点：
        因为使用this.$children获取所有子组件，得到的是一个数组，想要访问具体的某一个子组件，
        就需要使用数组下标，但是这就可能会导致获取到的子组件不准确，
        因为一旦子组件数量发送变化，下标所对应的值也很发送变化
        因此，想要更加准确的获取到一个特点的组件，可以使用this.$refs属性
    
    -->

    <!-- this.$refs的使用方法： -->
    <!-- 1.在使用子组件的时候，通过ref给某一个子组件绑定一个特定的ID -->
    <!-- 2.通过this.$refs.ID来访问到这个特定的组件 -->


    <!-- 二、子组件里面访问父组件：this.$parent -->

    <div id="app">
        <!-- 5.使用父组件 -->
        <father-cpn></father-cpn>

    </div>

    <script src="./vue.js"></script>
    <!-- 1.父组件模版 -->
    <template id="father-cpn">
        <div>
            <h1>父组件</h1>
            <!-- 6.使用子组件 -->
            <child1-cpn></child1-cpn>
            <child1-cpn></child1-cpn>
            <child2-cpn></child2-cpn>

            <!-- 使用 this.$children属性-->
            <button @click="allChild">点击输出所有子组件信息</button>

            <child1-cpn ref="one"></child1-cpn>
            <!-- <child1-cpn></child1-cpn> -->
            <child2-cpn ref="two"></child2-cpn>
            <!-- 注意：ref属性取值一定不能相同，否则后面的组件会覆盖前面的组件 -->

            <!-- 使用 this.$refs属性-->
            <button @click="allChild2">点击输出所有子组件信息</button>

        </div>
    </template>

    <!-- 3.注册子组件模版 -->
    <template id="child1-cpn">
        <div>
            <h3>子组件1</h3>
            <button @click="fatherInfor">点击输出父组件信息</button>
        </div>
    </template>
    <template id="child2-cpn">
        <div>
            <h3>子组件2</h3>
        </div>
    </template>

    <script>
        // 2.注册父组件为全局组件
        Vue.component("father-cpn", {
            template: "#father-cpn",
            data(){
                return {
                    message:"father11111111"

                }
            },
            // 4.注册子组件
            components: {
                "child1-cpn": {
                    template: "#child1-cpn",
                    methods:{
                        fatherInfor(){
                            console.log(this.$parent);
                            // 返回值就是父组件对象本身
                            console.log(this.$parent.message);
                            this.$parent.message=222222222;
                        }
                    }
                },
                "child2-cpn": {
                    template: "#child2-cpn",
                    data() {
                        return {
                            message: "子组件222222222222"
                        }
                    }
                }
            },
            methods: {
                allChild() {
                    console.log(this.$children);
                    //返回值是数组，数组中是所有子组件的相关信息，每一个子组件都是一个对象

                    // 在父组件中通过children属性可以访问到子组件中的数据，还可以修改数据
                    console.log(this.$children[1])
                    this.$children[1].message = "xxxxxxxxxxx"
                    console.log(this.$children[1].message);
                },
                allChild2(){
                    console.log(this.$refs);
                    // 返回值是对象，对象中是所有子组件的相关信息，每一个子组件都是一个对象
                    console.log(this.$refs.two);
                }
            }
        })

        let app = new Vue({
            el: "#app",
            data: {
                message: "appppppp"

            }
        })

        console.log(app);
    </script>
</body>

</html>